<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="uct" uri="/WEB-INF/uct.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <%@ include file="/common/adminlte/common-js.jsp"%>
  <%@ include file="/common/adminlte/common-css.jsp"%>	
  <title>WHQ | 基础平台</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- top start -->
  <%@include file="/common/adminlte/top.jsp" %>
  <!-- top end -->
  <!-- left start -->
  <%@include file="/common/adminlte/left.jsp" %>
  <!-- left end-->

  <div class="content-wrapper">
  		<br/>
		<ol class="breadcrumb bgblue">
			<li>
				<span class="label label-danger font14" >机构与用户管理 / 用户管理</span>
			</li>
		</ol>
		
    <!-- Main start -->

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              			<center>
              				<div class="btn-group">
								<button class="btn btn-info" type="button" onclick="toAdd();">增加</button>
				            	<button class="btn btn-info" type="button" onclick="del();">删除</button>
				            	<button class="btn btn-info" type="button" onclick="toEdit();">修改</button>
				            	<button class="btn btn-info" type="button" onclick="refresh();">刷新</button>
				            	<button class="btn btn-info" type="button">用户权限</button>
			            	</div>					
            	</center>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example" class="table table-bordered table-hover dataTableList" >
                <thead>
                <tr>
                  <th>用户账号</th>
                  <th>用户姓名</th>
                  <th>所属机构</th>
                  <th>所属部门</th>
                  <th>上级领导</th>
                  <th>用户类型</th>
                  <th>性别</th>
                  <th>手机</th>
                  <th>状态</th>
                </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Main end -->
  </div>
  <!-- /.content-wrapper -->
  <!-- foot start -->
  <%@include file="/common/adminlte/foot.jsp" %>
  <!-- foot start -->
  <!-- right start -->
  <%@include file="/common/adminlte/right.jsp" %>
  <!-- right start -->
  
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

	<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title">
							<font color="red">用户信息</font>&nbsp;
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="userForm">
							<input type="hidden" name="formToken" id="formToken" value="${formToken}">
							<input type="hidden" name="md5Pass" id="md5Pass" value=""/>	
							
							 <div class="box-body" id="userFormData">
							 
			                <div class="form-group">
			                  <label for="inputOrgCname" class="col-sm-2 control-label" >账号</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control"  name="userEname" required placeholder="必填项">
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">姓名</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control"  name="userCname" required placeholder="必填项">
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">密码</label>
			                  <div class="col-sm-8">
			                    <input type="password" class="form-control" id="userPassInput" name="userPassInput"   required placeholder="必填项">
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">确认密码</label>
			                  <div class="col-sm-8">
			                    <input type="password" class="form-control" id="userPass2" name="userPass2"  type="password" required placeholder="必填项">
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">邮箱</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control" name="email" placeholder="">
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">用户类型</label>
			                  <div class="col-sm-8">
			                    <select id="userType" name="userType" class="form-control" ></select>
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">所属机构</label>
			                  <div class="col-sm-8">
			                        <select id="orgId" name="orgId" class="form-control" onchange="initDept('deptId',this.value);"></select>
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">所属部门</label>
			                  <div class="col-sm-8">
			                  	<select id="deptId" name="deptId" class="form-control">
			                  		<option value=''>--请选择--</option>
			                  	</select>
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">上级领导</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control" name="fax"  placeholder="非必填项">
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">用户性别</label>
			                  <div class="col-sm-8" id="userSexDiv">
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">手机</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control" name="mobile"  placeholder="非必填项">
			                  </div>
			                </div>
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">联系电话</label>
			                  <div class="col-sm-8">
			                    <input type="text" class="form-control" name="phone"  placeholder="非必填项">
			                  </div>
			                </div>
			                
			                <div class="form-group">
			                  <label class="col-sm-2 control-label">状态</label>
			                  <div class="col-sm-8">
			                    <input type="radio"  value="1" name="userStatus" checked="checked"/> 启用 
                                <input type="radio" value="0" name="userStatus"/>停用
			                  </div>
			                </div>
			              </div>
			               <div class="box-footer">
			                <button type="button" class="btn btn-primary pull-left" onclick="cannel();">取消</button>
			                <button type="button" class="btn btn-primary pull-right" onclick="add('userForm');">提 交</button>
			              </div>
			              
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>		
</div>  
  
  
  
</body>



<script>
var search_url = "${ctx}/uct/user/user!data.action";
var add_url = "${ctx}/uct/user/save.action";
var del_url = "${ctx}/uct/user/del.action";
var view_url = "${ctx}/uct/user/getById.action";
var org_url = "${ctx}/uct/org/org!initOrg.action";
var dept_url = "${ctx}/uct/dept/dept!initDept.action";//?orgId=${item.orgId}

var dictUrl = "${ctx}/dict/item/list!tree.action";
DictUtil.getDictExtList("#userType", dictUrl, {cateEname:"memberType"});//用户类型
DictUtil.getRadioList("#userSexDiv","userSex", dictUrl,{cateEname:"userSex"});//用户性别


var table;

$(function () {

	table = initTable();
	
	$('#example tbody').on('click','tr', function () {
	     if ( $(this).hasClass('selected') ) {
	            //$(this).removeClass('selected');
	        }
	        else {
	            table.$('tr.selected').removeClass('selected');
	            $(this).addClass('selected');
	        }

	} );
  });
  
  
  

//设置模态框隐藏事件钩子  
$( '#my_modal' ).on( 'hide.bs.modal' ,function(e){  
	//cleanData('userFormData');
}); 

//设置模态框隐藏事件钩子  
$( '#my_modal' ).on( 'show.bs.modal' ,function(e){  
	$.ajax({
	    type:'post',
	    url:'${ctx}/sendPage/token?token=true',
	    dataType:'json',
	    success: function(myData){
	    	//console.log(myData);
			 $('#formToken').val(myData);
	  	}
	});	
	initOrg("orgId");

}); 

function cleanData(id){
	$(':input','#'+id)  
	 .not(':button, :submit, :reset, :hidden')  
	 .val('')  
	 //.removeAttr('checked')  
	 .removeAttr('selected'); 
}


function initTable(){
  var table = $('#example').DataTable({
		   "language": {"url": "${ctx}/common/adminlte/plugins/datatables/dataTables_zh-CN.js"},//处理国际化
	        ajax: {
	        	"url":search_url,
	        	"dataSrc": "rows"
	        },
	        columns: [
	            { "data": "userEname" },
	            { "data": "userCname" },
	            { "data": "orgEname" },
	            { "data": "deptName" },
	            { "data": "fax" },
	            { "data": "userType" },
	            { "data": "userSex" },
	            { "data": "mobile" },
	            { "data": "userStatus" }
	        ],
	        fnRowCallback: function( nRow, aData, iDisplayIndex ) {
				if ( aData.userSex =='F' )
				{
					$('td', nRow).eq(6).html('女');
				}else if(aData.userSex =='M'){
					$('td', nRow).eq(6).html('男');
				}else{
					$('td', nRow).eq(6).html('未定义');
				};
				if ( aData.userStatus =='1' )
				{
					$('td', nRow).eq(8).html('<font color=blue>启用</font>');
				}else{
					$('td', nRow).eq(8).html('<font color=red>停用</font>');
				};
				return nRow;
			}
	    });
  			return table;
  }
  
function getSelected(table,id){
	var obj =  table.rows('.selected').data();
	if(obj.length>0){
		return obj[0][id];
	}
}  
  
function toAdd(){
	$('#my_modal').modal('show');
}


function toEdit(){
	var id  = getSelected(table,'userId');
	if(id =="undefined"){
		alert("请先选中一条数据！");
		return;
	}else{
		$.ajax({
		    type:'post',
		    url:view_url,
		    data:{'id':id},
		    dataType:'json',
		    success: function(myData){
				 FormUtil.fillData("#userForm", myData);
				 $('#my_modal').modal('show');
		  	}
		});	
	}
}

function del(){
	var id  = getSelected(table,'userId');
	if(id =="undefined"){
		alert("请先选中一条数据！");
		return;
	}else{
		$.ajax({
		    type:'post',
		    url:del_url,
		    data:{'id':id},
		    dataType:'json',
		    success: function(myData){
		    	if(myData.flag=='T'){
		    		alert("删除成功！");
		    		refresh();
		    	}

		  	}
		});	
	}

	
}


function add(formId){
	
	if(!$("#" + formId)[0].checkValidity()){
		alert("请先完善必输项和必选项！");
		
    	var pass = $("#userPassInput").val();
    	var pass2 = $("#userPass2").val();
    	if($.trim(pass) != $.trim(pass2)){
    		$.messager.alert('错误提示', '两次输入密码不一致!', 'error');
    		return;
    	}else{
       		$("#md5Pass").val(pass.md5());
    	}
		return ;
	}
	
	$.ajax({
	    type:'post',
	    url:add_url,
	    data:$("#"+formId).serialize(),
	    dataType:'json',
	    success: function(myData){
	    	//console.log(myData);
	    	if(myData.flag=='T'){
	    		alert("添加成功！");
	    		$('#my_modal').modal('hide');
	    		refresh();
	    	}

	  	}
	});	
	
	
}

function cannel(){
	$('#my_modal').modal('hide');

}

function initOrg(selectId){
	$("#"+selectId).append("<option value=''>--请选择--</option>");
	$.ajax({
        url: org_url, 
        async:false,
        type: "POST",
        dataType: "text",
        error: function(){  
           alert('异常错误');  
        },  
        success: function(data){
        	var obj = $.parseJSON(data);
			for(var i = 0; i < obj.length; i++){
				$("#"+selectId).append("<option value='"+obj[i].orgId+"'>"+obj[i].orgCname+"</option>");
			}
        }
    });
}

//value:orgId
function initDept(selectId,value){
	$("#"+selectId).html("");
	$("#"+selectId).append("<option value=''>--请选择--</option>");

	$.ajax({
        url: dept_url, 
        data:{'orgId':value},
        async:false,
        type: "POST",
        dataType: "text",
        error: function(){  
           alert('异常错误');  
        },  
        success: function(data){
        	var obj = $.parseJSON(data);
			for(var i = 0; i < obj.length; i++){
				$("#"+selectId).append("<option value='"+obj[i].deptId+"'>"+obj[i].deptCname+"</option>");
			}
        }
    });
}



function refresh(){
    //window.location.reload();
    table.ajax.reload();
}

</script>




</html>
